<template>
	<view class="page">
		<!-- Header -->
		<view class="header-bag">
			<image src="/static/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<text class="page-title">保单详情</text>
		</view>
		
		<!-- Main Content -->
		<view class="wrapper">
			<image class="com-log" src="/static/img/insureComLog.png"></image>
			<view class="single-code">
				<text>单证代码 : </text>
				<text>以实收保单为准</text>
			</view>
			<view class="heads">个人保险凭证</view>
			
			<view class="personal-info">
				<view class="left-part">
					<view class="info-item">
						<text>保险合同号码 : </text>
						<text>以实收保单为准</text>
					</view>
					<view class="info-item">
						<text>被保险人姓名 : </text>
						<text>{{ insuranceData.insurant_realname || '' }}</text>
					</view>
					<view class="info-item">
						<text>性别 : </text>
						<text>{{ insuranceData.sex == 1 ? '男' : insuranceData.sex == 2 ? '女' : '' }}</text>
						<text>  证件类型 : </text>
						<text>身份证</text>
					</view>
					<view class="info-item">
						<text>受益人 : </text>
						<text>法定受益人</text>
					</view>
					<view class="info-item">
						<text>保险合同生效日期 : </text>
						<text>以实收保单为准</text>
					</view>
				</view>
				
				<view class="right-part">
					<view class="info-item">
						<text>个人分单号码 : </text>
						<text>以实收保单为准</text>
					</view>
					<view class="info-item">
						<text>出生日期 : </text>
						<text>{{ insuranceData.birthday || '' }}</text>
					</view>
					<view class="info-item">
						<text>证件号码 : </text>
						<text>{{ insuranceData.id_number || '' }}</text>
					</view>
					<view class="info-item">
						<text>与被保险人关系 : </text>
						<text>未提供</text>
					</view>
				</view>
			</view>
			
			<view class="during-interval">
				<text>保险期间 : </text>
				<text>以实收保单为准</text>
			</view>
			
			<view class="insurance-type">
				<view class="type-info">
					<text>投险险种 : </text>
					<text>百年团体年金保险(分红型)</text>
					<text>   险种代码 : </text>
					<text>1802</text>
				</view>
				<view class="blank-info">(本栏以下空白)</view>
			</view>
			
			<view class="payment-method">
				<text>交费方式 : 不定期交</text>
			</view>
			
			<image class="footer-img" src="/static/img/insurefooter.png"></image>
			
			<view class="salesman">
				<text class="salesman-left">业务员代码:以实收保单为准</text>
				<text class="salesman-right">业务员姓名:以实收保单为准</text>
			</view>
			<view class="salesman">
				<text class="salesman-left">签单公司地址:以实收保单为准</text>
				<text class="salesman-right">全国统一客服专线:95542</text>
			</view>
			<view class="company-info">
				<text>公司主页:www.aeonlife.com.cn</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			insuranceData: {}
		}
	},
	onLoad() {
		this.loadInsuranceData()
	},
	methods: {
		loadInsuranceData() {
			// 从缓存中获取数据
			const res = uni.getStorageSync('res')
			if (res && res.data) {
				this.insuranceData = res.data
				// 清除缓存
				uni.removeStorageSync('res')
			}
		},
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.page {
	width: 100%;
	height: 100vh;
	font-family: "宋体";
}

.header-bag {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.back {
	position: absolute;
	left: 20rpx;
	width: 40rpx;
	height: 40rpx;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
}

.wrapper {
	width: 100%;
	background: url('/static/img/insureBg.gif') no-repeat top left;
	background-size: 100%;
	height: 100%;
	background-position: cover;
	font-size: 30rpx;
	padding: 0 20rpx;
	color: black;
	position: relative;
}

.com-log {
	width: 340rpx;
	height: 100rpx;
	position: absolute;
	top: 60rpx;
	left: 20rpx;
}

.single-code {
	position: absolute;
	right: 20rpx;
	top: 60rpx;
	font-size: 48rpx;
}

.heads {
	width: 100%;
	text-align: center;
	margin-top: 200rpx;
	font-size: 60rpx;
	font-weight: bold;
}

.personal-info {
	width: 100%;
	padding-top: 100rpx;
	display: flex;
	justify-content: space-between;
}

.left-part, .right-part {
	width: 48%;
}

.info-item {
	line-height: 100rpx;
	word-break: break-all;
}

.during-interval {
	width: 100%;
	word-break: break-all;
	line-height: 100rpx;
	margin-top: 60rpx;
}

.insurance-type {
	width: 100%;
	margin-top: 60rpx;
	padding-bottom: 460rpx;
}

.type-info, .blank-info {
	line-height: 100rpx;
}

.payment-method {
	margin-top: 20rpx;
	line-height: 100rpx;
}

.footer-img {
	width: 100%;
	display: block;
	border: 2rpx solid #4b4b4b;
	padding: 20rpx;
	box-sizing: border-box;
	margin-top: 60rpx;
}

.salesman {
	height: 60rpx;
	line-height: 60rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}

.salesman-left {
	width: 55%;
}

.salesman-right {
	width: 45%;
	text-align: right;
}

.company-info {
	margin-top: 20rpx;
	line-height: 60rpx;
}
</style>